<!DOCTYPE html>
<html class="x-admin-sm">
<!-- 商家信息的查看页面 -->

<head>
    <meta charset="UTF-8">
    <title>商家查看页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link href="css/newStyle.css" rel="stylesheet">
    <!-- 弹窗轻提示 -->
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
    <!-- 引入jq -->
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <!-- <script type="text/javascript" src="./js/domain.js"></script> -->
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

    <style>
        .none {
            display: none;
        }

        .fl {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 筛选模块 */

        .searchPart {
            border: 1px solid #ccc;
            margin: 15px 15px 5px 15px;
            background-color: #fff;
        }

        .layui-form-item {
            margin-bottom: 3px;
        }

        /* 表格部分 */

        .FormTablePart,
        .TotalTablePart,
        .FanTablePart {
            margin: 15px 15px;
        }

        .FormTablePart {
            border: 1px solid #ddd;
            height: 40vh;
            text-align: center;
        }

        .userImg .layui-icon {
            font-size: 70px;
            color: #ccc;
        }

        .userNum {
            font-size: 16px;
            margin: 15px 0;
        }

        .userText {
            width: 100px;
            height: 25px;
            line-height: 25px;
            background: #f04844;
            border-radius: 10px;
            margin: 0 auto;
            color: #fff;
        }

        .FormTablePartLf {
            padding-top: 20px;
            flex: 3;
        }

        .FormTablePartRg {
            flex: 7;
            height: 100%;
            margin-top: 20px;
            margin-left: 20px;
        }

        .layui-table-view .layui-table {
            width: 100%;
            height: 100%;
        }


        .totalTitle,
        .fanTitle {
            font-size: 16px;
            color: #666;
        }

        .sfz {
            width: 200px;
            height: 120px;
            background-color: #000;
            margin: 50px 30px;
            float: left;
            overflow: hidden;
        }

        .sfz img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .layui-input {
            line-height: 30px;
        }

        .userImg #storePic {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <!-- 导航条模块 -->
    <div class="x-nav" style="padding-top: 5px;  position: fixed; top: 0;width: 100%;">

        <a style="display: inline-block; " class="layui-btn layui-btn-small">
            <cite>商家详情</cite>
        </a>
        <a class="layui-btn " style="line-height:1.6em;margin-top:3px;float:right; position: relative; left: -30px;"
            onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px">刷新</i>
        </a>

    </div>

    <!-- 导购员信息模块 -->
    <div class="FormTablePart fl" style="margin-top: 60px;">
        <div class="FormTablePartLf">
            <div class="userImg">
                <img class="layui-icon layui-icon-username" id="storePic" src="">
            </div>
            <div class="userNum" id="storeName">格力旗舰店</div>

        </div>
        <div class="FormTablePartRg">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item fl">
                    <div class="layui-inline">
                        <label class="layui-form-label">店铺名称</label>
                        <div class="layui-input-inline">
                            <p class="layui-input" id="storeName2"></p>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">店铺账号</label>
                        <div class="layui-input-inline">
                            <p class="layui-input" id="loginName"></p>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item fl">
                    <div class="layui-inline">
                        <label class="layui-form-label">营业执照编号</label>
                        <div class="layui-input-inline">
                            <p class="layui-input" id="papersCreditCode"></p>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-inline">
                            <p class="layui-input" id="storeCertPhone"></p>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item fl">
                    <div class="layui-inline">
                        <label class="layui-form-label">商家支付宝</label>
                        <div class="layui-input-inline">
                            <p class="layui-input" id="storeAlipayCode"></p>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">支付宝姓名</label>
                        <div class="layui-input-inline">
                            <p class="layui-input" id="storeAlipayName"></p>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item fl">
                    <div class="layui-inline">
                        <label class="layui-form-label">法人姓名</label>
                        <div class="layui-input-inline">
                            <p class="layui-input" id="storeCertName"></p>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-inline">
                            <p class="layui-input" id="storeCustomerPhone"></p>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item fl">
                    <div class="layui-inline">
                        <label class="layui-form-label">所在地址</label>
                        <div class="layui-input-inline">
                            <p class="layui-input" id="storeAddress"></p>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">定位信息</label>
                        <div class="layui-input-inline">
                            <p class="layui-input" id="locateInformation"></p>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item fl">
                    <div class="layui-inline">
                        <label class="layui-form-label">服务费</label>
                        <div class="layui-input-inline">
                            <p class="layui-input" id="storeMoney"></p>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">注册时间</label>
                        <div class="layui-input-inline">
                            <p class="layui-input" id="time"></p>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>

    <div class="FormTablePart fl">
        <div class="FormTablePartLf">
            <p>营业执照</p>
        </div>
        <div style="height: 100%;width: 1px;overflow: hidden;background-color: #ddd;"></div>
        <div class="FormTablePartRg businessLicense">
            <!-- <div class="sfz"><img id="papersPic" src="#" onclick="previewImg(this)"></div> -->
        </div>
    </div>
    <div class="FormTablePart fl">
        <div class="FormTablePartLf">
            <p>身份证照</p>
        </div>
        <div style="height: 100%;width: 1px;overflow: hidden;background-color: #ddd;"></div>
        <div class="FormTablePartRg" id="storeInPicCode">
            <!-- <div class="sfz"><img id="idCardPic" src="" onclick="previewImg(this)"></div>
			<div class="sfz"><img id="idCardPic2" src="" onclick="previewImg(this)"></div> -->
        </div>
    </div>
    <div class="FormTablePart fl">
        <div class="FormTablePartLf">
            <p>店铺封面</p>
        </div>
        <div style="height: 100%;width: 1px;overflow: hidden;background-color: #ddd;"></div>
        <div class="FormTablePartRg">
            <div class="sfz"><img id="storeDecorationPic" src="" onclick="previewImg(this)"></div>
        </div>
    </div>
    <div class="FormTablePart fl">
        <div class="FormTablePartLf">
            <p>门店照片</p>
        </div>
        <div style="height: 100%;width: 1px;overflow: hidden;background-color: #ddd;"></div>
        <div class="FormTablePartRg" id="storeInPic">

        </div>
    </div>
    <script>
        layui.use(['layedit', 'laydate', 'table', 'form', 'layer'], function () {
            var table = layui.table
                , form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , $ = layui.jquery;
            var shopId = "";

            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return unescape(r[2]); return null; //返回参数值
            }
            //   console.log(getUrlParam("id"));
            shopId = getUrlParam("id");
            //   console.log(shopId , '拿到商家的id')
            Showload();
            $.ajax({
                url: urls + "smallStore/storeView",
                headers: {
                    'X-Access-Token': JSON.parse(sessionStorage.getItem("user_message")).token,
                },
                data: { id: shopId },
                type: "get",
                dataType: "json",
                //   where : {token : token},
                contentType: "application/json;charset=UTF-8",
                success: function (data) {
                    CheckLogout(data); //检查是否登陆过
                    // console.log(data,'查看的渲染');
                    if (data.code == 0) {
                        $("#time").html(data.data.bSmallStore.createTime);
                        $('#storeName').html(data.data.bSmallStore.storeName);
                        $('#storeName2').html(data.data.bSmallStore.storeName);
                        $('#papersCreditCode').html(data.data.papersCreditCode);
                        $('#storeCertPhone').html(data.data.bSmallStore.storeCustomerPhone);
                        $('#loginName').html(data.data.bSmallStore.storePhone);
                        $('#storeAlipayCode').html(data.data.bSmallStore.storeAlipayCode);
                        $('#storeAlipayName').html(data.data.bSmallStore.storeAlipayName);
                        $('#storeCertName').html(data.data.bSmallStore.storeCertName);
                        $('#storeAddress').html(data.data.bSmallStore.storeAddress);
                        $('#storeCustomerPhone').html(data.data.bSmallStore.storeCertPhone);
                        $('#locateInformation').html(data.data.bSmallStore.locateInformation);
                        $('#storeMoney').html(data.data.bSmallStore.storeMoney);
                        $('#storePic').attr("src", imgUrl + data.data.bSmallStore.storePic); //头像
                        // 营业执照
                        if (data.data.picList.length > 3) {
                            data.data.picList = data.data.picList.slice(0, 3);
                        }
                        if (data.data.picList.length > 0) {
                            // $('#papersPic').attr("src", imgUrl + data.data.picList[0].papersPic);
                            var html2 = '';
                            for (var i = 0; i < data.data.picList.length; i++) {
                                html2 += '<div class="sfz"><img src="' + imgUrl + data.data.picList[i].papersPic + '" onclick="previewImg(this)"></div>'
                            }
                            $('.businessLicense').html(html2)
                        }
                        // 门头照片
                        $('#storeDecorationPic').attr("src", imgUrl + data.data.bSmallStore.storeDecorationPic);
                        // 店内图片数组
                        var storeInPicList = data.data.storePicList.filter(v => {
                            return v.type == 2
                        })
                        // console.log(storeInPicList)
                        if (storeInPicList.length > 3) {
                            storeInPicList = storeInPicList.slice(0, 3);
                        }
                        var html = '';
                        // 门店照片
                        if (storeInPicList.length > 0) {
                            for (var i = 0; i < storeInPicList.length; i++) {
                                html += '<div class="sfz"><img src="' + imgUrl + storeInPicList[i].storePic + '" onclick="previewImg(this)"></div>'
                            }
                            $('#storeInPic').html(html);
                        }
                        //  身份证
                        var codeInPicList = data.data.storePicList.filter(v => {
                            return v.type == 1
                        })
                        var html1 = '';
                        if (codeInPicList.length > 0) {
                            for (var i = 0; i < codeInPicList.length; i++) {
                                html1 += '<div class="sfz"><img src="' + imgUrl + codeInPicList[i].storePic + '" onclick="previewImg(this)"></div>'
                            }
                            $('#storeInPicCode').html(html1);
                        }
                    } else {
                        layer.msg(data.msg);
                    }
                    InitTime();
                },
                error: function (data) {
                    InitTime();
                }
            });

        });

        function previewImg(obj) {
            var img = new Image();
            img.src = obj.src;
            var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [500 + 'px', 550 + 'px'],  // area: [width + 'px',height+'px']  //原图显示
                shadeClose: true,
                scrollbar: false,
                title: "图片预览", //不显示标题  
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
                cancel: function () {  
                }
            });
        }
    </script>


</body>


</html>